@import 'mixin/mixin';
@import 'common/var.scss';
@import 'mixin/utils.scss';
@import 'mixin/button';

@include b(button) {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: $--button-default-background-color;
    border: $--border-base;
    border-color: $--button-default-border-color;
    color: $--button-default-font-color;
    text-align: center;
    box-sizing: border-box;
    // 围绕边框盒子外的边线样式
    outline: none;
    margin: 0;
    -webkit-appearance: button;
    font-weight: $--button-font-weight;
    // 渐变，加入这个，鼠标经过颜色变化会有渐变过程
    transition: .1s;
    @include utils-user-select(none);
    // 紧跟当前元素后的元素，如div+p是紧跟div的p元素
    & + & {
        margin-left: 10px;
    }
    @include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, $--button-border-radius);
    &:hover,
    &:focus {
        color: $--color-primary;
        border-color: $--color-primary-light-7;
        background-color: $--color-primary-light-9;
    }
    &:active {
        color: mix($--color-black, $--color-primary, $--button-active-shade-percent)
    }
    &.el-button--text {
        background-color: transparent;
    }
    // el-button--text样式
    @include m(text) {
        border-color: transparent;
        color: $--color-primary;
        background: transparent;
        padding-left: 0;
        padding-right: 0;
        &:hover,
        &:focus {
            border-color: transparent;
            background-color: transparent;
            color: mix($--color-white, $--color-primary, $--button-hover-tint-percent)
        }
        &:active {
            border-color: transparent;
            background-color: transparent;
            color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
        }
        // .is-disabled
        @include when (disabled) {
            &,
            &:hover,
            &:focus {
                // 禁用状态下的文字颜色
                color: $--button-disabled-font-color;
                // 禁用鼠标指针
                cursor: not-allowed;
                background-color: $--button-disabled-background-color;
                border-color: $--button-disabled-border-color;
            }
        }
        &.is-disabled,
        &.is-disabled:hover,
        &.is-disabled:focus {
            border-color: transparent;
        }
    }
}